{% extends 'base.html.twig' %}

{% set title = 'Component ' ~ component.manifest.name ~ ' - ' ~ kit.manifest.name ~ ' Kit' %}
{% set description = "Documentation of component #{component.manifest.name}, from the UX Toolkit #{kit.manifest.name}, #{kit.manifest.description}." %}
{% set meta = {
    title,
    description,
    canonical: url('app_icons'),
    social: {
        title,
        description,
        image: {
            url: absolute_url(asset(package.getSocialImage('1200x675'))),
            type: 'image/png',
            width: 1200,
            height: 675,
            alt: package.humanName ~ ' - Kit ' ~ kit.manifest.name,
        },
    }
} %}

{% block content %}
    <div class="hero"></div>

    <div class="container-fluid container-xl pt-4" style="display: grid; grid-template-columns: 180px 1fr; gap: 2rem">
        {{ include('toolkit/_kit_aside.html.twig') }}

        <div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ path('app_toolkit') }}">UX Toolkit</a></li>
                    <li class="breadcrumb-item"><a href="{{ path('app_toolkit', {'_fragment': 'kits'}) }}">Kits</a></li>
                    <li class="breadcrumb-item"><a href="{{ path('app_toolkit_kit', {kitId: kit_id.value}) }}">{{ kit.manifest.name }}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{ component.manifest.name }}</li>
                </ol>
            </nav>

            <twig:Toolkit:ComponentDoc kitId="{{ kit_id }}" component="{{ component }}" />
        </div>
    </div>
{% endblock %}
